<template>
  <view class="data-insights-container">
    <!-- 头部 -->
    <view class="header">
      <view class="header-content">
        <text class="header-title">数据洞察</text>
        <view class="header-actions">
          <text class="action-btn" @click="goToCustomize">⚙️ 自定义</text>
          <text class="action-btn" @click="refreshData">🔄 刷新</text>
        </view>
      </view>
    </view>
    <!-- 渐变背景头部 -->
    <view class="header-gradient">
      <view class="header-content">
        <text class="back-btn" @click="goBack">←</text>
        <view class="header-title-group">
          <text class="header-title">数据洞察</text>
          <text class="header-subtitle">Data Insights & Analytics</text>
        </view>
        <text class="refresh-btn" @click="refreshData">🔄</text>
      </view>
    </view>

    <!-- 时间选择器 -->
    <view class="time-selector">
      <view class="time-tabs">
        <view 
          v-for="tab in timeTabs" 
          :key="tab.value"
          class="time-tab"
          :class="{ active: activeTimeRange === tab.value }"
          @click="changeTimeRange(tab.value)"
        >
          <text class="tab-text">{{ tab.label }}</text>
        </view>
      </view>
      <view class="custom-date" @click="showDatePicker = true">
        <text class="date-text">{{ formatDateRange }}</text>
        <text class="date-arrow">›</text>
      </view>
    </view>

    <!-- 主内容区域 -->
    <scroll-view class="main-content" scroll-y>
      <!-- 关键指标卡片 -->
      <view class="kpi-section">
        <text class="section-title">关键业务指标</text>
        <view class="kpi-grid">
          <view class="kpi-card" v-for="kpi in kpiData" :key="kpi.id">
            <view class="kpi-icon" :style="{ backgroundColor: kpi.color }">
              {{ kpi.icon }}
            </view>
            <view class="kpi-content">
              <text class="kpi-value">{{ formatNumber(kpi.value) }}</text>
              <text class="kpi-label">{{ kpi.label }}</text>
              <view class="kpi-trend" :class="kpi.trend">
                <text class="trend-icon">{{ kpi.trendIcon }}</text>
                <text class="trend-value">{{ kpi.trendValue }}%</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 图表区域 -->
      <view class="charts-section">
        <!-- 库存趋势图 -->
        <view class="chart-card">
          <view class="card-header">
            <text class="card-title">库存趋势分析</text>
            <view class="chart-actions">
              <view 
                class="action-btn"
                :class="{ active: chartType === 'line' }"
                @click="switchChartType('line')"
              >
                <text class="btn-text">折线图</text>
              </view>
              <view 
                class="action-btn"
                :class="{ active: chartType === 'bar' }"
                @click="switchChartType('bar')"
              >
                <text class="btn-text">柱状图</text>
              </view>
            </view>
          </view>
          <view class="chart-container">
            <canvas 
              canvas-id="inventoryTrendChart"
              id="inventoryTrendChart"
              class="chart-canvas"
            ></canvas>
          </view>
        </view>

        <!-- 物料分类分析 -->
        <view class="chart-card">
          <view class="card-header">
            <text class="card-title">物料分类占比</text>
            <view class="chart-legend">
              <view 
                v-for="item in categoryData" 
                :key="item.name"
                class="legend-item"
              >
                <view class="legend-color" :style="{ backgroundColor: item.color }"></view>
                <text class="legend-text">{{ item.name }} ({{ item.percent }}%)</text>
              </view>
            </view>
          </view>
          <view class="chart-container">
            <canvas 
              canvas-id="categoryPieChart"
              id="categoryPieChart"
              class="chart-canvas"
            ></canvas>
          </view>
        </view>

        <!-- 仓库利用率 -->
        <view class="chart-card">
          <view class="card-header">
            <text class="card-title">仓库利用率分析</text>
            <text class="card-subtitle">各仓库库存占比与利用率</text>
          </view>
          <view class="warehouse-stats">
            <view 
              v-for="warehouse in warehouseStats" 
              :key="warehouse.name"
              class="warehouse-item"
            >
              <view class="warehouse-info">
                <text class="warehouse-name">{{ warehouse.name }}</text>
                <text class="warehouse-capacity">{{ warehouse.capacity }}吨</text>
              </view>
              <view class="warehouse-progress">
                <view class="progress-bar">
                  <view 
                    class="progress-fill"
                    :style="{ 
                      width: warehouse.utilization + '%',
                      backgroundColor: getProgressColor(warehouse.utilization)
                    }"
                  ></view>
                </view>
                <text class="utilization-text">{{ warehouse.utilization }}%</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 库存预警分析 -->
        <view class="chart-card">
          <view class="card-header">
            <text class="card-title">库存预警分析</text>
            <view class="warning-summary">
              <text class="summary-text">{{ warningSummary.total }} 个预警</text>
            </view>
          </view>
          <view class="warning-grid">
            <view 
              v-for="warning in warningDetails" 
              :key="warning.type"
              class="warning-card"
              :class="warning.severity"
            >
              <view class="warning-icon">{{ warning.icon }}</view>
              <view class="warning-content">
                <text class="warning-title">{{ warning.title }}</text>
                <text class="warning-count">{{ warning.count }} 项</text>
                <text class="warning-desc">{{ warning.description }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 数据表格 -->
      <view class="table-section">
        <view class="section-header">
          <text class="section-title">热门物料排行</text>
          <view class="table-actions">
            <view class="export-btn" @click="exportTable">
              <text class="btn-icon">📊</text>
              <text class="btn-text">导出</text>
            </view>
          </view>
        </view>
        <view class="data-table">
          <view class="table-header">
            <text class="header-cell">排名</text>
            <text class="header-cell">物料名称</text>
            <text class="header-cell">库存量</text>
            <text class="header-cell">周转率</text>
            <text class="header-cell">预警状态</text>
          </view>
          <view class="table-body">
            <view 
              v-for="(item, index) in topMaterials" 
              :key="item.id"
              class="table-row"
              @click="showMaterialDetail(item)"
            >
              <text class="table-cell rank">#{{ index + 1 }}</text>
              <text class="table-cell name">{{ item.name }}</text>
              <text class="table-cell stock">{{ formatNumber(item.stock) }}</text>
              <text class="table-cell turnover">{{ item.turnover }}%</text>
              <view class="table-cell status">
                <view class="status-badge" :class="item.status">
                  {{ getStatusText(item.status) }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 业务洞察建议 -->
      <view class="insights-section">
        <view class="section-title">智能业务建议</view>
        <view class="insights-grid">
          <view 
            v-for="insight in businessInsights" 
            :key="insight.id"
            class="insight-card"
            :class="insight.priority"
          >
            <view class="insight-header">
              <view class="insight-icon">{{ insight.icon }}</view>
              <text class="insight-title">{{ insight.title }}</text>
            </view>
            <text class="insight-description">{{ insight.description }}</text>
            <view class="insight-actions">
              <view class="action-btn" @click="handleInsightAction(insight)">
                <text class="btn-text">{{ insight.actionText }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-buttons">
        <view class="btn btn-primary" @click="refreshData">
          <text class="btn-icon">🔄</text>
          <text class="btn-text">刷新数据</text>
        </view>
        <view class="btn btn-secondary" @click="generateReport">
          <text class="btn-icon">📋</text>
          <text class="btn-text">生成报告</text>
        </view>
        <view class="btn btn-tertiary" @click="customizeDashboard">
          <text class="btn-icon">⚙️</text>
          <text class="btn-text">自定义</text>
        </view>
      </view>
    </view>

    <!-- 日期选择器 -->
    <u-calendar 
      :show="showDatePicker"
      mode="range"
      @confirm="onDateConfirm"
      @cancel="showDatePicker = false"
    />

    <!-- 物料详情弹窗 -->
    <u-popup 
      :show="showDetailModal"
      mode="bottom"
      @close="showDetailModal = false"
    >
      <view class="detail-modal">
        <view class="modal-header">
          <text class="modal-title">物料详情</text>
          <text class="close-btn" @click="showDetailModal = false">✕</text>
        </view>
        <scroll-view class="modal-content" scroll-y>
          <view class="detail-info">
            <view class="info-section">
              <text class="section-title">基本信息</text>
              <view class="info-grid">
                <view class="info-item">
                  <text class="label">物料编码</text>
                  <text class="value">{{ selectedMaterial.code }}</text>
                </view>
                <view class="info-item">
                  <text class="label">物料名称</text>
                  <text class="value">{{ selectedMaterial.name }}</text>
                </view>
                <view class="info-item">
                  <text class="label">规格型号</text>
                  <text class="value">{{ selectedMaterial.spec }}</text>
                </view>
                <view class="info-item">
                  <text class="label">当前库存</text>
                  <text class="value">{{ selectedMaterial.stock }} {{ selectedMaterial.unit }}</text>
                </view>
              </view>
            </view>
            
            <view class="info-section">
              <text class="section-title">历史趋势</text>
              <canvas 
                canvas-id="materialHistoryChart"
                id="materialHistoryChart"
                class="mini-chart"
              ></canvas>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

export default {
  data() {
    return {
      activeTimeRange: '7d',
      showDatePicker: false,
      showDetailModal: false,
      chartType: 'line',
      startDate: '',
      endDate: '',
      kpiData: [
        {
          id: 1,
          icon: '📦',
          label: '总库存价值',
          value: 2847500,
          color: '#3b82f6',
          trend: 'up',
          trendIcon: '↗',
          trendValue: 12.5
        },
        {
          id: 2,
          icon: '🔄',
          label: '周转率',
          value: 3.2,
          color: '#10b981',
          trend: 'up',
          trendIcon: '↗',
          trendValue: 8.3
        },
        {
          id: 3,
          icon: '⚠️',
          label: '预警物料',
          value: 23,
          color: '#f59e0b',
          trend: 'down',
          trendIcon: '↘',
          trendValue: 15.2
        },
        {
          id: 4,
          icon: '📊',
          label: '日均出入库',
          value: 156,
          color: '#8b5cf6',
          trend: 'up',
          trendIcon: '↗',
          trendValue: 5.7
        }
      ],
      categoryData: [
        { name: '螺纹钢', value: 45, color: '#3b82f6', percent: 45 },
        { name: '盘螺', value: 25, color: '#10b981', percent: 25 },
        { name: '角钢', value: 15, color: '#f59e0b', percent: 15 },
        { name: '工字钢', value: 10, color: '#8b5cf6', percent: 10 },
        { name: '其他', value: 5, color: '#64748b', percent: 5 }
      ],
      warehouseStats: [
        { name: '主仓库', capacity: 5000, utilization: 78 },
        { name: '原材料库', capacity: 3000, utilization: 65 },
        { name: '成品库', capacity: 2000, utilization: 92 },
        { name: '半成品库', capacity: 1500, utilization: 45 }
      ],
      warningDetails: [
        {
          type: 'low-stock',
          icon: '⚠️',
          title: '低库存预警',
          count: 15,
          severity: 'warning',
          description: '库存低于安全库存线'
        },
        {
          type: 'expiring',
          icon: '⏰',
          title: '临期物料',
          count: 5,
          severity: 'danger',
          description: '即将超过保质期'
        },
        {
          type: 'slow-moving',
          icon: '🐌',
          title: '滞销物料',
          count: 3,
          severity: 'info',
          description: '超过30天无出入库'
        }
      ],
      topMaterials: [
        { id: 1, name: '螺纹钢 HRB400 Φ12', stock: 1250, turnover: 85.3, status: 'normal', code: 'MAT001', spec: 'Φ12*12000', unit: '件' },
        { id: 2, name: '螺纹钢 HRB400 Φ16', stock: 890, turnover: 72.1, status: 'warning', code: 'MAT002', spec: 'Φ16*12000', unit: '件' },
        { id: 3, name: '盘螺 HRB400 Φ8', stock: 650, turnover: 68.5, status: 'normal', code: 'MAT003', spec: 'Φ8*1000', unit: '件' },
        { id: 4, name: '角钢 Q235 50*50', stock: 320, turnover: 45.2, status: 'danger', code: 'MAT004', spec: '50*50*5', unit: '件' },
        { id: 5, name: '工字钢 Q235 20#', stock: 180, turnover: 38.7, status: 'normal', code: 'MAT005', spec: '20#', unit: '件' }
      ],
      businessInsights: [
        {
          id: 1,
          icon: '📈',
          title: '库存优化建议',
          description: '螺纹钢HRB400库存偏高，建议减少采购量20%',
          priority: 'high',
          actionText: '查看详情'
        },
        {
          id: 2,
          icon: '⚡',
          title: '周转率提升',
          description: '角钢类物料周转率偏低，建议优化采购策略',
          priority: 'medium',
          actionText: '制定计划'
        },
        {
          id: 3,
          icon: '🎯',
          title: '仓库空间优化',
          description: '成品库利用率已达92%，建议扩容或调整布局',
          priority: 'high',
          actionText: '规划方案'
        }
      ],
      selectedMaterial: {},
      timeTabs: [
        { label: '今日', value: '1d' },
        { label: '本周', value: '7d' },
        { label: '本月', value: '30d' },
        { label: '本季', value: '90d' }
      ]
    }
  },
  
  computed: {
    formatDateRange() {
      if (this.startDate && this.endDate) {
        return `${this.startDate} - ${this.endDate}`
      }
      return '选择日期范围'
    },
    
    warningSummary() {
      const total = this.warningDetails.reduce((sum, warning) => sum + warning.count, 0)
      return { total }
    }
  },
  
  methods: {
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toLocaleString()
    },
    
    changeTimeRange(range) {
      this.activeTimeRange = range
      this.loadInsightsData()
    },
    
    switchChartType(type) {
      this.chartType = type
      this.renderCharts()
    },
    
    getProgressColor(utilization) {
      if (utilization >= 90) return '#ef4444'
      if (utilization >= 70) return '#f59e0b'
      return '#10b981'
    },
    
    getStatusText(status) {
      const statusMap = {
        normal: '正常',
        warning: '预警',
        danger: '危险'
      }
      return statusMap[status] || status
    },
    
    async loadInsightsData() {
      try {
        const params = {
          timeRange: this.activeTimeRange,
          startDate: this.startDate,
          endDate: this.endDate
        }
        const result = await this.$api.warehouse.dataInsights.getDataInsights(params)
        if (result.data) {
          this.updateData(result.data)
        }
      } catch (error) {
        this.showToast('加载数据失败')
      }
    },
    
    updateData(data) {
      // 更新数据逻辑
      if (data.kpiData) {
        this.kpiData = data.kpiData
      }
      if (data.categoryData) {
        this.categoryData = data.categoryData
      }
      if (data.warehouseStats) {
        this.warehouseStats = data.warehouseStats
      }
      this.renderCharts()
    },
    
    renderCharts() {
      // 渲染图表逻辑
      this.$nextTick(() => {
        this.renderInventoryTrendChart()
        this.renderCategoryPieChart()
      })
    },
    
    renderInventoryTrendChart() {
      // 库存趋势图渲染逻辑
      const ctx = uni.createCanvasContext('inventoryTrendChart', this)
      // 这里实现具体的图表绘制逻辑
      ctx.draw()
    },
    
    renderCategoryPieChart() {
      // 物料分类饼图渲染逻辑
      const ctx = uni.createCanvasContext('categoryPieChart', this)
      // 这里实现具体的图表绘制逻辑
      ctx.draw()
    },
    
    goBack() {
      uni.navigateBack()
    },
    
    goToCustomize() {
      uni.navigateTo({
        url: '/pages/smart/warehouse/data-insights/customize'
      })
    },
    
    refreshData() {
      this.loadInsightsData()
    },
    
    exportTable() {
      // 导出表格逻辑
      this.showToast('导出功能开发中')
    },
    
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  },
  
  onLoad() {
    this.loadInsightsData()
  },
  
  onReady() {
    this.renderCharts()
  }
}
    console.error('获取数据洞察失败:', error)
    uni.showToast({
      title: '加载数据失败',
      icon: 'none'
    })
  }
}

const updateData = (data) => {
  kpiData.value = data.kpiData || kpiData.value
  categoryData.value = data.categoryData || categoryData.value
  warehouseStats.value = data.warehouseStats || warehouseStats.value
  topMaterials.value = data.topMaterials || topMaterials.value
  businessInsights.value = data.businessInsights || businessInsights.value
  
  nextTick(() => {
    renderCharts()
  })
}

const renderCharts = async () => {
  await nextTick()
  
  // 库存趋势图
  renderInventoryTrendChart()
  
  // 物料分类饼图
  renderCategoryPieChart()
  
  // 物料历史趋势图
  if (showDetailModal.value) {
    renderMaterialHistoryChart()
  }
}

const renderInventoryTrendChart = () => {
  // 使用图表库渲染库存趋势图
  console.log('渲染库存趋势图:', chartType.value)
}

const renderCategoryPieChart = () => {
  // 渲染物料分类饼图
  console.log('渲染物料分类饼图')
}

const renderMaterialHistoryChart = () => {
  // 渲染物料历史趋势图
  console.log('渲染物料历史趋势图')
}

const showMaterialDetail = async (material) => {
  selectedMaterial.value = material
  showDetailModal.value = true
  
  try {
    const result = await getMaterialDetail(material.id)
    if (result.data) {
      selectedMaterial.value = { ...material, ...result.data }
    }
  } catch (error) {
    uni.showToast({
      title: '获取详情失败',
      icon: 'none'
    })
  }
  
  nextTick(() => {
    renderMaterialHistoryChart()
  })
}

const exportTable = async () => {
  try {
    const result = await exportInsightsData({
      type: 'table',
      data: topMaterials.value
    })
    
    if (result.success) {
      uni.showToast({
        title: '导出成功',
        icon: 'success'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '导出失败',
      icon: 'none'
    })
  }
}

const handleInsightAction = (insight) => {
  switch (insight.id) {
    case 1:
      uni.navigateTo({
        url: '/pages/smart/warehouse/inventory/query?material=螺纹钢HRB400'
      })
      break
    case 2:
      uni.navigateTo({
        url: '/pages/smart/warehouse/data-insights/turnover-analysis'
      })
      break
    case 3:
      uni.navigateTo({
        url: '/pages/smart/warehouse/warehouse-planning'
      })
      break
  }
}

// 添加自定义页面跳转方法
const goToCustomize = () => {
  uni.navigateTo({
    url: '/pages/smart/warehouse/data-insights/customize'
  })
}

// 刷新方法 - 使用正确的函数名
const refreshData = () => {
  loadInsightsData()
  uni.showToast({
    title: '数据已刷新',
    icon: 'success'
  })
}

// 在 onMounted 中添加配置加载
onMounted(() => {
  loadData()
  loadConfiguration()
})

// 添加配置加载方法
const loadConfiguration = () => {
  const config = uni.getStorageSync('dashboard-config')
  if (config) {
    // 应用自定义配置
    if (config.timeRange) {
      timeRange.value = config.timeRange
    }
    if (config.warehouses) {
      selectedWarehouses.value = config.warehouses
    }
    if (config.thresholds) {
      warningThresholds.value = config.thresholds
    }
  }
}



const generateReport = () => {
  uni.showModal({
    title: '生成报告',
    content: '确定要生成当前数据洞察报告吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '生成中...' })
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({
            title: '报告已生成',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

const customizeDashboard = () => {
  uni.navigateTo({
    url: '/pages/smart/warehouse/data-insights/customize'
  })
}

const onDateConfirm = (e) => {
  startDate.value = e.startDate
  endDate.value = e.endDate
  showDatePicker.value = false
  loadInsightsData()
}

const goBack = () => {
  uni.navigateBack()
}

// 初始化
onMounted(() => {
  loadInsightsData()
})
</script>

<style lang="scss" scoped>
// 样式变量
$primary-color: #3b82f6;
$success-color: #10b981;
$warning-color: #f59e0b;
$danger-color: #ef4444;
$bg-color: #f8fafc;
$card-bg: #ffffff;
$border-color: #e2e8f0;
$text-primary: #1e293b;
$text-secondary: #64748b;

// 混入
@mixin card-style {
  background: $card-bg;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin: 20rpx;
  padding: 32rpx;
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-insights-container {
  min-height: 100vh;
  background: $bg-color;
}

.header-gradient {
  height: 320rpx;
  background: linear-gradient(135deg, $primary-color, #1d4ed8);
  border-radius: 0 0 40rpx 40rpx;
  position: relative;
  
  .header-content {
    @include flex-center;
    height: 100%;
    justify-content: space-between;
    padding: 0 40rpx;
    color: white;
    
    .back-btn {
      font-size: 48rpx;
      font-weight: bold;
    }
    
    .header-title-group {
      text-align: center;
      
      .header-title {
        font-size: 48rpx;
        font-weight: 600;
        display: block;
      }
      
      .header-subtitle {
        font-size: 28rpx;
        opacity: 0.8;
      }
    }
    
    .refresh-btn {
      font-size: 40rpx;
      padding: 20rpx;
    }
  }
}

.time-selector {
  @include card-style;
  margin-top: -40rpx;
  position: relative;
  z-index: 10;
  
  .time-tabs {
    display: flex;
    gap: 16rpx;
    margin-bottom: 20rpx;
    
    .time-tab {
      flex: 1;
      padding: 16rpx 0;
      text-align: center;
      border: 1rpx solid $border-color;
      border-radius: 12rpx;
      font-size: 28rpx;
      color: $text-secondary;
      transition: all 0.3s ease;
      
      &.active {
        background: $primary-color;
        color: white;
        border-color: $primary-color;
      }
    }
  }
  
  .custom-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    background: $bg-color;
    border-radius: 12rpx;
    
    .date-text {
      font-size: 28rpx;
      color: $text-primary;
    }
    
    .date-arrow {
      font-size: 32rpx;
      color: $text-secondary;
    }
  }
}

.main-content {
  padding: 20rpx;
  padding-bottom: 140rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 24rpx;
}

.kpi-section {
  margin-bottom: 40rpx;
  
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    
    .kpi-card {
      background: $card-bg;
      border-radius: 16rpx;
      padding: 32rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 20rpx;
      
      .kpi-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        @include flex-center;
        font-size: 40rpx;
        color: white;
      }
      
      .kpi-content {
        flex: 1;
        
        .kpi-value {
          display: block;
          font-size: 36rpx;
          font-weight: 700;
          color: $text-primary;
        }
        
        .kpi-label {
          display: block;
          font-size: 24rpx;
          color: $text-secondary;
          margin: 8rpx 0;
        }
        
        .kpi-trend {
          display: flex;
          align-items: center;
          gap: 8rpx;
          font-size: 24rpx;
          
          &.up {
            color: $success-color;
          }
          
          &.down {
            color: $danger-color;
          }
          
          .trend-icon {
            font-size: 20rpx;
          }
        }
      }
    }
  }
}

.chart-card {
  @include card-style;
  margin-bottom: 40rpx;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    .card-title {
      font-size: 32rpx;
      font-weight: 600;
      color: $text-primary;
    }
    
    .card-subtitle {
      font-size: 24rpx;
      color: $text-secondary;
    }
    
    .chart-actions {
      display: flex;
      gap: 12rpx;
      
      .action-btn {
        padding: 8rpx 16rpx;
        border: 1rpx solid $border-color;
        border-radius: 12rpx;
        font-size: 24rpx;
        color: $text-secondary;
        transition: all 0.3s ease;
        
        &.active {
          background: $primary-color;
          color: white;
          border-color: $primary-color;
        }
      }
    }
  }
  
  .chart-container {
    height: 400rpx;
    
    .chart-canvas {
      width: 100%;
      height: 100%;
    }
  }
  
  .chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-bottom: 20rpx;
    
    .legend-item {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-size: 24rpx;
      
      .legend-color {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
      }
      
      .legend-text {
        color: $text-secondary;
      }
    }
  }
}

.warehouse-stats {
  .warehouse-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid $border-color;
    
    &:last-child {
      border-bottom: none;
    }
    
    .warehouse-info {
      .warehouse-name {
        display: block;
        font-size: 28rpx;
        font-weight: 500;
        color: $text-primary;
      }
      
      .warehouse-capacity {
        font-size: 24rpx;
        color: $text-secondary;
      }
    }
    
    .warehouse-progress {
      display: flex;
      align-items: center;
      gap: 16rpx;
      
      .progress-bar {
        width: 120rpx;
        height: 8rpx;
        background: $border-color;
        border-radius: 4rpx;
        overflow: hidden;
        
        .progress-fill {
          height: 100%;
          transition: width 0.3s ease;
        }
      }
      
      .utilization-text {
        font-size: 24rpx;
        color: $text-secondary;
        min-width: 50rpx;
      }
    }
  }
}

.warning-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
  
  .warning-card {
    background: $card-bg;
    border: 1rpx solid $border-color;
    border-radius: 12rpx;
    padding: 24rpx;
    text-align: center;
    transition: all 0.3s ease;
    
    &.warning {
      border-color: $warning-color;
      background: rgba($warning-color, 0.1);
    }
    
    &.danger {
      border-color: $danger-color;
      background: rgba($danger-color, 0.1);
    }
    
    &.info {
      border-color: $primary-color;
      background: rgba($primary-color, 0.1);
    }
    
    .warning-icon {
      font-size: 48rpx;
      margin-bottom: 12rpx;
    }
    
    .warning-content {
      .warning-title {
        display: block;
        font-size: 24rpx;
        font-weight: 500;
        color: $text-primary;
        margin-bottom: 8rpx;
      }
      
      .warning-count {
        display: block;
        font-size: 32rpx;
        font-weight: 700;
        color: $text-primary;
        margin-bottom: 8rpx;
      }
      
      .warning-desc {
        font-size: 20rpx;
        color: $text-secondary;
      }
    }
  }
}

.table-section {
  margin-bottom: 40rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    .section-title {
      margin: 0;
    }
    
    .table-actions {
      .export-btn {
        display: flex;
        align-items: center;
        gap: 8rpx;
        padding: 12rpx 24rpx;
        background: $primary-color;
        color: white;
        border-radius: 12rpx;
        font-size: 24rpx;
        
        .btn-icon {
          font-size: 24rpx;
        }
      }
    }
  }
  
  .data-table {
    background: $card-bg;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    
    .table-header {
      display: grid;
      grid-template-columns: 80rpx 1fr 120rpx 100rpx 120rpx;
      gap: 20rpx;
      padding: 24rpx;
      background: $bg-color;
      
      .header-cell {
        font-size: 24rpx;
        font-weight: 600;
        color: $text-primary;
      }
    }
    
    .table-body {
      .table-row {
        display: grid;
        grid-template-columns: 80rpx 1fr 120rpx 100rpx 120rpx;
        gap: 20rpx;
        padding: 24rpx;
        border-bottom: 1rpx solid $border-color;
        transition: all 0.3s ease;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:active {
          background: $bg-color;
        }
        
        .table-cell {
          font-size: 24rpx;
          color: $text-primary;
          display: flex;
          align-items: center;
          
          &.rank {
            font-weight: 700;
            color: $primary-color;
          }
          
          &.name {
            font-weight: 500;
          }
          
          &.status {
            .status-badge {
              padding: 4rpx 12rpx;
              border-radius: 12rpx;
              font-size: 20rpx;
              
              &.normal {
                background: rgba($success-color, 0.1);
                color: $success-color;
              }
              
              &.warning {
                background: rgba($warning-color, 0.1);
                color: $warning-color;
              }
              
              &.danger {
                background: rgba($danger-color, 0.1);
                color: $danger-color;
              }
            }
          }
        }
      }
    }
  }
}

.insights-section {
  margin-bottom: 40rpx;
  
  .insights-grid {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .insight-card {
      background: $card-bg;
      border: 1rpx solid $border-color;
      border-radius: 16rpx;
      padding: 32rpx;
      transition: all 0.3s ease;
      
      &.high {
        border-color: $danger-color;
        background: rgba($danger-color, 0.05);
      }
      
      &.medium {
        border-color: $warning-color;
        background: rgba($warning-color, 0.05);
      }
      
      .insight-header {
        display: flex;
        align-items: center;
        gap: 16rpx;
        margin-bottom: 16rpx;
        
        .insight-icon {
          font-size: 40rpx;
        }
        
        .insight-title {
          font-size: 28rpx;
          font-weight: 600;
          color: $text-primary;
        }
      }
      
      .insight-description {
        font-size: 24rpx;
        color: $text-secondary;
        line-height: 1.5;
        margin-bottom: 20rpx;
      }
      
      .insight-actions {
        .action-btn {
          padding: 12rpx 24rpx;
          background: $primary-color;
          color: white;
          border-radius: 12rpx;
          font-size: 24rpx;
          text-align: center;
          transition: all 0.3s ease;
          
          &:active {
            opacity: 0.8;
          }
        }
      }
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: $card-bg;
  padding: 20rpx;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .action-buttons {
    display: flex;
    gap: 16rpx;
    
    .btn {
      flex: 1;
      padding: 24rpx 0;
      border-radius: 12rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 500;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      
      &.btn-primary {
        background: $primary-color;
        color: white;
      }
      
      &.btn-secondary {
        background: $success-color;
        color: white;
      }
      
      &.btn-tertiary {
        background: $text-secondary;
        color: white;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }
}

.detail-modal {
  background: $card-bg;
  border-radius: 40rpx 40rpx 0 0;
  max-height: 80vh;
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 32rpx 20rpx;
    border-bottom: 1rpx solid $border-color;
    
    .modal-title {
      font-size: 36rpx;
      font-weight: 600;
      color: $text-primary;
    }
    
    .close-btn {
      font-size: 40rpx;
      color: $text-secondary;
      padding: 20rpx;
    }
  }
  
  .modal-content {
    padding: 32rpx;
    max-height: 60vh;
    
    .detail-info {
      .info-section {
        margin-bottom: 40rpx;
        
        .section-title {
          font-size: 32rpx;
          font-weight: 600;
          color: $text-primary;
          margin-bottom: 24rpx;
        }
        
        .info-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20rpx;
          
          .info-item {
            .label {
              display: block;
              font-size: 24rpx;
              color: $text-secondary;
              margin-bottom: 8rpx;
            }
            
            .value {
              display: block;
              font-size: 28rpx;
              font-weight: 500;
              color: $text-primary;
            }
          }
        }
        
        .mini-chart {
          width: 100%;
          height: 300rpx;
        }
      }
    }
  }
}
.header-actions {
  display: flex;
  gap: 20rpx;
  
  .action-btn {
    padding: 12rpx 24rpx;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 20rpx;
    font-size: 26rpx;
    color: #3b82f6;
    
    &:active {
      background: rgba(59, 130, 246, 0.2);
    }
  }
}
</style>